<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style type="text/css">
        html,
        body,
        #outer img {
            margin: 0;
            padding: 0;
        }
        /*这里用到font-sizez:0;是用来清除行内元素之间空白区的影响。而图片父元素使用padding：0 0 10px 10px
        和自身的margin:10px 10px 0 0;则可以看作是盒子布局的小技巧；*/
        
        #outer {
            width: 560px;
            margin: 0 auto;
            border: 1px solid red;
            text-align: center;
            font-size: 0;
            padding: 0 0 10px 10px;
            overflow: hidden;
            zoom: 1
        }
        
        #outer img {
            border: 1px solid black;
            margin: 10px 10px 0 0;
            cursor: crosshair;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oImg = document.getElementsByTagName("img");
            for (var i = 0; i < oImg.length; i++) {
                oImg[i].onmouseover = function() {
                    this.style.cssText = "opacity:1.0;filter:alpha(opacity:100)";
                }
                oImg[i].onmouseout = function() {
                    this.style.cssText = "";
                }
            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
    </div>
</body>

</html>